<template>
  <div class="find_password_body">
    <div class="find_password_email">
      <input class="find_password_text" v-model="email" type="email" placeHolder="邮箱" >
      <button @touchstart="handleToVerify">发送验证码</button>
    </div>
    <div>
      <input class="find_password_text" v-model="verify" type="text" placeHolder="验证码" >
    </div>
    <div>
      <input class="find_password_text" v-model="password" type="password" placeHolder="请输入新密码" >
    </div>
     <div class="find_password_btn">
      <input type="submit" value="修改密码" @touchstart="handleToPassword">
    </div>
    <div class="find_password_link">
      <router-link to="/mine/login">立即登录</router-link>
      <router-link to="/mine/register">立即注册</router-link>
    </div>
  </div>
</template>

<script>
import {messageBox} from '@/components/js'
export default {
  data() {
    return {
      email: '',
      verify: '',
      password: ''
    }
  },
  methods: {
    async handleToVerify() {
      if(this.email) {
        let res = await this.$axios.get(`/api2/users/verify?email=${this.email}`)
        if(res && res.data.status === 0) {
          messageBox({
            title: '验证码',
            content: res.data.msg,
            ok: '确定'
          })
        }else{
          messageBox({
            title: '验证码',
            content: res.data.msg,
            ok: '确定'
          })
        }
      }
    },
    async handleToPassword() {
      if(!this.email || !this.verify || !this.password) {
        messageBox({
          title: '提示',
          content: '请填写完整信息',
          ok: '确定'
        })
        return
      }
      let res = await this.$axios.post('/api2/users/updatePassword',{
        email: this.email,
        password: this.password,
        verify: this.verify
      })
      let that = this
      if(res.data.status === 0) {
        messageBox({
          title: '修改密码',
          content: res.data.msg,
          ok: '确定',
          handleOk() {
            that.$router.push('/mine/login')
          }
        })
      }else {
        messageBox({
          title: '修改密码',
          content: res.data.msg + ',请重新修改',
          ok: '确定'
        })
      }
    }
  }
}
</script>

<style scoped>
#content .find_password_body{  width:100%;}
.find_password_body .find_password_email{  display: flex; align-items: center}
.find_password_body .find_password_email .find_password_text { flex: 1 }
.find_password_body .find_password_email button { width: 25%; height:40px; margin-bottom:5px; outline: none;}
.find_password_body .find_password_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.find_password_body .find_password_btn{ height:50px; margin:10px;}
.find_password_body .find_password_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.find_password_body .find_password_link{ display: flex; justify-content:space-between;}
.find_password_body .find_password_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>
